<!-- 财务员工收银台 -->
<template>
  <div class="owner-cashier">
    <!--  描述  -->
    <a-descriptions :title="null" bordered class="owner-descriptions">
      <a-descriptions-item label="车牌号">
        <div class="link" @click="EditVehicle" style="color: #4095e5">
          {{ carNumberData.car_number }}
        </div>
      </a-descriptions-item>
      <a-descriptions-item label="车辆类型">
        <div>{{ carNumberData.charge_type_txt }}</div>
        <div
          v-if="
            (carNumberData.charge_type == 1 ||
              carNumberData.charge_type == 3) &&
            carNumberData.enable_time
          "
        >
          {{ carNumberData.enable_time }} ~ {{ carNumberData.overdue_time }}
        </div>
      </a-descriptions-item>
      <a-descriptions-item label="车辆余额">
        <div class="link" @click="storedValue" style="color: #4095e5">
          {{ carNumberData.balance }}
        </div>
      </a-descriptions-item>
      <a-descriptions-item label="所属车场">
        {{ carNumberData.village_name }}/{{ carNumberData.park_name }}
      </a-descriptions-item>
      <a-descriptions-item label="车主姓名">
        {{ carNumberData.user_name }}
      </a-descriptions-item>
      <a-descriptions-item label="车主手机号">
        <div style="width: 160px; display: inline-block">
          <span v-if="!showes">{{ user_phone }}</span>
          <span v-else>{{ carNumberData.user_phone }}</span>
          <EyeFilled
            v-if="!showes"
            style="margin-left: 10px; font-size: 16px; color: #101010"
            @click="switches"
          />
          <EyeInvisibleFilled
            v-else
            style="margin-left: 10px; font-size: 16px; color: #101010"
            @click="switches"
          />
        </div>
      </a-descriptions-item>
    </a-descriptions>

    <!--  关联房屋  -->
    <a-table
      class="bind-table"
      :dataSource="ownerData?.bindList || []"
      :columns="houseColumns"
      :loading="bindLoading"
      :pagination="false"
      rowKey="id"
      :scroll="{ y: 280 }"
      bordered
    >
      <template #title>
        <span class="owner-bind"> 车主关联房屋 </span>
        <TextTip
          tips="此处的房屋将展示该租客关联的所有房屋，与左上角选中项目/楼宇无关。如果您未选中该楼宇，无法点击房号查看房屋详情。"
        />
      </template>
      <template #bodyCell="{ text, record, index, column }">
        <template v-if="column.key === 'room_number'">
          <span
            :class="canCheck(record.build_id) ? 'link' : 'disabled-link'"
            :title="
              canCheck(record.build_id)
                ? ''
                : '您未选中该项目楼宇，无法查看房屋详情。'
            "
            @click.stop="goRoomDetail(record.build_id, record)"
          >
            {{ text || "--" }}
          </span>
        </template>
        <template v-if="column.key === 'statutag_names'">
          <template v-if="text?.length">
            <span v-for="(item, index) in text">
              {{ item }}
              <text v-if="text?.length > 1 && index + 1 !== text.length"
                >、</text
              >
            </span>
          </template>
          <span v-else>--</span>
        </template>
      </template>
    </a-table>

    <!--  账单列表  -->
    <div class="mt-20 bill-table">
      <a-table
        :dataSource="billList"
        :columns="BILL_COLUMNS"
        :loading="billLoading"
        size="small"
        bordered
        :pagination="turnoverPagination"
        :scroll="{ y: 330 }"
      >
        <template #title>
          <a-row type="flex" align="middle" justify="space-between">
            <a-col class="font-16">车辆订单记录</a-col>
            <a-col>
              <a-space>
                <a-button type="primary" ghost @click="showstored(2)">
                  储值缴费
                </a-button>
                <a-button type="primary" @click="showstored(1)">
                  月租缴费
                </a-button>
              </a-space>
            </a-col>
          </a-row>
        </template>
        <template #bodyCell="{ text, record, index, column }">
          <template v-if="column.key === 'OrderingInformation'">
            <div style="text-align: center">
              订单名称：{{ record.order_name }}
            </div>
            <div style="text-align: center">订单号：{{ record.order_id }}</div>
          </template>
          <template v-if="column.key === 'Amount'">
            <span style="color: #1990ff">￥{{ record.pay_money }}</span>
          </template>
          <template v-if="column.key === 'actualTotal'">
            <span
              style="color: #1990ff; cursor: pointer"
              @click="xiangqing(record)"
              >详情</span
            >
          </template>
        </template>
      </a-table>
    </div>

    <!--  账单列表  -->
    <div class="mt-20 bill-table" style="padding-bottom: 100px">
      <a-table
        :dataSource="operateList"
        :columns="Operate"
        :pagination="Pagination"
        :loading="operateLoading"
        :scroll="{x: 'max-content' , y: 330 }"
        size="small"
        bordered
      >
        <template #title>
          <a-row type="flex" align="middle" justify="space-between">
            <a-col class="font-16">车辆操作记录</a-col>
          </a-row>
        </template>
        <template #bodyCell="{ text, record, index, column }">
          <template v-if="column.key === 'Name'">
            <span
              class="handclick"
              style="color: #1890ff"
              @click="operatees(record)"
              >{{ record.user_name }}</span
            >
          </template>
          <template v-if="column.key === 'str'">
            <div style="white-space: pre;">{{ text }}</div>
          </template>

        </template>
      </a-table>
    </div>

    <!--  房间详情  -->
    <RoomDrawer
      v-if="houseDetailVisible"
      :visible="houseDetailVisible"
      @cancel="cancelRoomDetail"
      :detail="roomDetail"
      :maxRoomNumber="maxRoomNumber"
      :roomList="roomList"
      pageFrom="CashierDesk"
    />

    <UserDetail
      @request="$utils.commonRequest"
      :visible="userVisible"
      :uid="userId"
      :coordinateData="coordinateData"
      @cancel="userVisible = false"
    />

    <a-modal :visible="stored" @cancel="handlepay" :width="750">
      <template #title>
        <div style="text-align: center">{{ titles }}</div>
      </template>
      <template #footer>
        <div
          style="
            display: flex;
            justify-content: space-between;
            line-height: 32px;
          "
        >
          <div>
            缴费金额
            <TextTip
              v-if="paytypes == 1"
              tips="缴费金额 = 车位数 * 套餐金额"
            />：
            <span style="color: #c33124; font-size: 16px; font-weight: 700"
              >￥{{ amountMoney }}</span
            >
          </div>
          <div>
            <a-button type="primary" :loading="loading" @click="Completepayment(0)" >
              <template #icon><money-collect-outlined /></template>
              现金支付
            </a-button >
            <a-button style="border-color: green;background-color: green;"  type="primary" :loading="submitLoading" @click="Completepayment(1)" >
              <template #icon><tablet-outlined /></template>
              扫码支付
            </a-button >
          </div>
        </div>
      </template>
      <div style="min-height: 300px">
        <div v-if="paytypes == 2" style="font-size: 16px; font-weight: 600">
          请选择储值金额
        </div>
        <div v-else style="font-size: 16px; font-weight: 600">
          请选择月租套餐
        </div>
        <div v-if="paytypes == 2" style="min-height: 200px; padding-top: 20px">
          <div
            v-for="(item, index) in managelist"
            @click="storedes(index)"
            class="chuzhi"
            :class="selecteder == index ? 'borderes' : ''"
          >
            {{ item }}元
          </div>
          <div
            class="chuzhi1"
            @click="storedes(managelist.length)"
            :class="selecteder == managelist.length ? 'borderes' : ''"
          >
            <a-input-number
              v-model:value="other"
              @change="qhchange"
              :min="1"
              @pressEnter="qhchange"
              placeholder="其他金额"
            />
          </div>
        </div>
        <div v-else style="min-height: 200px; padding-top: 20px">
          <div
            v-for="(item, index) in managelist"
            @click="rentaler(index)"
            class="MonthlyRent"
            :class="selecteder == index ? 'borderes' : ''"
          >
            <div class="monthes">{{ item.name }}</div>
            <div class="moneyes">{{ item.price }}元</div>
          </div>
          <div
            class="MonthlyRent1"
            @click="rentaler(managelist.length)"
            :class="selecteder == managelist.length ? 'borderes' : ''"
          >
            <a-input-number
              v-model:value="OtherMonths"
              @change="qhOtherMon"
              placeholder="其他月份"
              :min="1"
            />
            <div
              v-if="OtherMonths"
              style="
                text-align: center;
                height: 32px;
                line-height: 32px;
                font-size: 16px;
                font-weight: 500;
              "
            >
              {{ fee }}元
            </div>
            <div
              v-else
              style="
                text-align: center;
                height: 32px;
                line-height: 32px;
                font-size: 16px;
                font-weight: 500;
              "
            >
              月租金额
            </div>
          </div>
        </div>
        <div style="display: flex">
          <div v-if="paytypes == 1" style="display: inline-block; width: 50%">
            <div style="font-size: 15px; font-weight: 600">生效时间：</div>
            <div><a-date-picker v-model:value="value2" @change="changetimes" :disabled="MonthlyRent" /></div>
          </div>
          <div v-if="paytypes == 1" style="display: inline-block; width: 50%">
            <div style="font-size: 15px; font-weight: 600">车位数量：</div>
            <div style="height: 32px; line-height: 32px">{{ space_num }}</div>
          </div>
          <!--          <div style="display: inline-block;width: 50%;">
            <div style="font-size: 15px;font-weight: 600;">汇款方式：</div>
            <div style="height: 32px;line-height: 32px;">现金收款</div>
          </div>-->
        </div>
      </div>
    </a-modal>

    <OnlinePayment
        :visible="payVisible"
        :orderId="orderId"
        :qrcodeUrl="qrcodeUrl"
        @payClose="paySuccessGoBack"
        @goBack="paySuccessGoBack"
        @paySuccess="paySuccess"
    />
      <!-- 停车页面 -->
    <div v-if="showMicroPages">
      <micro-app-org
        v-if="showMicroPages"
        router-mode="state"
        style="height: 100%"
        :name="currentAppName"
        :url="
          isProduction
            ? `${locationUrl}/micro_apps/workPark/`
            : devHttpMap[currentAppName]
        "
        :default-page="`#${defaultPageData[currentAppName]}`"
        :data="getAppToChildData"
        @datachange="handleComponentsChange"
        destory
      ></micro-app-org>
    </div>
  </div>
</template>

<script>
import {
  defineComponent,
  toRefs,
  reactive,
  computed,
  watch,
  onActivated,
  nextTick
} from "vue";

import { EyeFilled, EyeInvisibleFilled,TabletOutlined,MoneyCollectOutlined } from "@ant-design/icons-vue";
import request from "@/common/utils/request";
import utils from "@/common/utils/utils";
import { TextTip, UserDetail } from "bl-common-vue3";
import store from "@/store";
import RoomDrawer from "@/components/village/RoomDrawer.vue";
import _ from "lodash";
import { message, Modal } from "ant-design-vue";
import dayjs from "dayjs";
const dateFormatStr = "YYYY-MM-DD";
import OnlinePayment from "@/components/village/modules/OnlinePayment.vue";
import microApp from "@micro-zoe/micro-app";

export default defineComponent({
  name: "ownerCheckStand",
  components: {
    RoomDrawer,
    TextTip,
    EyeFilled,
    EyeInvisibleFilled,
    UserDetail,
    OnlinePayment,
    TabletOutlined,
    MoneyCollectOutlined,
  },
  props: {
    items: {
      type: Object,
      default: () => {
        return {};
      },
    },
  },
  setup(props, { emit }) {
    const state = reactive({
      ownerData: {},
      bindLoading: false,
      billLoading: false,
      operateLoading: false,
      bindList: [],
      operateList: [],
      // 房间详情
      maxRoomNumber: 0,
      roomList: [],
      houseDetailVisible: false,
      roomDetail: {},
      showes: false,

      carNumberData: {},
      user_phone: "",

      //订单
      page: 1,
      pageSize: 10,
      total: 0,
      billList: [],

      //操作记录
      total1: 0,
      page1: 1,
      pageSize1: 10,
      userVisible: false,
      userId: 0,
      coordinateData: {},

      stored: false,
      loading: false,

      car_id: "",
      titles: "",
      paytypes: "",
      value1: null,
      value2: null,
      managelist: [],
      selecteder: 0,
      amountMoney: 0,
      other: "",
      OtherMonths: "",
      fee: "",
      ownerId: "",
      park_id: "",
      car_number: "",

      // 展示应用页面
      showMicroPages: false,
      currentAppName: "",
      currentAlias: "",
      loadedAppMenu: [],
      currentAppComponent: "",

      space_num: 0,
      MonthlyRent:false,

      orderId: "", // 订单id,
      payVisible: false, // 支付的展示
      qrcodeUrl: "",
      submitLoading: false,

      getAppToChildData: {},
    });
    const switches = () => {
      if (!state.showes) {
        state.showes = true;
      } else {
        state.showes = false;
      }
    };

    const getCashierInfo = () => {
      state.bindLoading = true;
      request
        .get("/org", "/owner/billCashier", { owner_id: state.ownerId })
        .then((res) => {
          state.ownerData = res?.ownerData || {};
        })
        .finally(() => {
          state.bindLoading = false;
        });
    };

    const getVehicle = () => {
      request
        .get("/work_park", "/car/info", {
          car_id: state.car_id,
        })
        .then((res) => {
          state.carNumberData = res.info;
          state.user_phone =
            res.info.user_phone.substring(0, 3) +
            "****" +
            res.info.user_phone.substring(7, 11);
          state.car_id = res.info.id;
          state.car_number = res.info.car_number;
          state.park_id = res.info.park_id;
          state.ownerId = res.info.ownerId;
          OperationRecords();
          orderGoods();
          if (res.info.ownerId && res.info.ownerId.length > 0) {
            getCashierInfo();
          }
        });
    };

    const canCheck = (buildId) => {
      const { checkedBuildings } = store.getters.buildingInfo;
      if (checkedBuildings.includes(buildId)) {
        return true;
      } else {
        return false;
      }
    };

    const goRoomDetail = (buildId, record) => {
      if (canCheck(buildId)) {
        state.roomDetail = record;
        state.houseDetailVisible = true;
      }
    };

    const cancelRoomDetail = () => {
      state.houseDetailVisible = false;
      state.roomDetail = {};
      state.roomList = [];
      state.maxRoomNumber = 0;
    };

    // 获取最大房源号
    const getMaxRoomNumber = (list) => {
      let max = 0;
      for (let room of list) {
        if (max < Number(room.room_number)) {
          max = Number(room.room_number);
        }
      }
      return max;
    };

    // 点击房间详情
    const roomClick = (room, room_list, village_id) => {
      if (canCheck(room.build_id)) {
        let canViewRoomList = room_list.filter((v) => canCheck(v.build_id));
        canViewRoomList = canViewRoomList.map((v) => {
          v.village_id = village_id;
          return v;
        });
        state.roomList = canViewRoomList;
        let _room = _.cloneDeep(room);
        _room.village_id = village_id;
        state.roomDetail = _room;
        state.maxRoomNumber = getMaxRoomNumber(state.roomList);
        state.houseDetailVisible = true;
      }
    };

    const showstored = (item) => {
      state.paytypes = item;
      if (item == 2) {
        state.titles = "储值缴费";
        request
          .get("/work_park", "/parkcar/store_charge", {
            car_id: state.car_id,
            park_id: state.park_id,
          })
          .then((res) => {
            state.managelist = res.parkCharge.store_package;
            state.selecteder = 0;
            state.amountMoney = state.managelist[state.selecteder];
          });
      } else if (item == 1) {
        let today = dayjs().format(dateFormatStr);
        if(state.carNumberData.overdue_time){
          let date1 = new Date(today)
          let date2 = new Date(state.carNumberData.overdue_time)
          let today2 = dayjs(state.carNumberData.overdue_time).add(1, 'days').format(dateFormatStr);

          if (date1 < date2) {
            state.value1 = today2
            state.value2 = dayjs(today2, dateFormatStr)
            state.MonthlyRent = true
            // console.log("月租到期时间大")
          } else if (date1 > date2) {
            if(state.carNumberData.in_park == 0){
              state.value1 = today2
              state.value2 = dayjs(today2, dateFormatStr)
            }
            if(state.carNumberData.in_park == 1){
              state.value1 = today
              state.value2 = dayjs(today, dateFormatStr)
            }
            state.MonthlyRent = false
            // console.log("今天日期大")
          } else {
            let today1 = dayjs().add(1, 'days').format(dateFormatStr);
            state.value1 = today1
            state.value2 = dayjs(today1, dateFormatStr)
            state.MonthlyRent = true
            // console.log("两者相等")
          }
        }else {
          state.value1 = today
          state.value2 = dayjs(today, dateFormatStr)
          state.MonthlyRent = false
        }

        state.titles = "月租缴费";
        request
          .get("/work_park", "/parkcar/month_charge", {
            car_id: state.car_id,
            park_id: state.park_id,
          })
          .then((res) => {
            state.managelist = res.parkCharge.month_recharge_package;
            state.selecteder = 0;
            state.space_num = res.car.space_num;
            if (state.space_num > 0) {
              state.amountMoney =
                state.managelist[state.selecteder].price * state.space_num;
            } else {
              state.amountMoney = state.managelist[state.selecteder].price;
            }
            
          });
      }
      state.stored = true;
      state.loading = false;
    };

    const storedes = (index) => {
      if (state.managelist.length == index) {
        state.selecteder = index;
        state.amountMoney = state.other;
      } else {
        state.selecteder = index;
        state.amountMoney = state.managelist[state.selecteder];
      }
    };

    const rentaler = (index) => {
      if (state.managelist.length == index) {
        state.selecteder = index;
        if (state.space_num > 0) {
          state.amountMoney = state.fee * state.space_num;
        } else {
          state.amountMoney = state.fee;
        }
      } else {
        state.selecteder = index;
        if (state.space_num > 0) {
          state.amountMoney =
            state.managelist[state.selecteder].price * state.space_num;
        } else {
          state.amountMoney = state.managelist[state.selecteder].price;
        }
      }
    };

    const qhOtherMon = (e) => {
      request
        .post("/work_park", "/parkcar/month_charge_money", {
          car_id: state.car_id,
          park_id: state.park_id,
          month: e,
        })
        .then((res) => {
          state.fee = res.fee;
          if (state.space_num > 0) {
            state.amountMoney = state.fee * state.space_num;
          } else {
            state.amountMoney = state.fee;
          }
        });
    };

    const qhchange = (e) => {
      state.amountMoney = JSON.parse(JSON.stringify(e));
    };

    const handlepay = () => {
      state.stored = false;
      state.managelist = [];
      state.selecteder = 0;
      state.amountMoney = 0;
      state.other = "";
      state.OtherMonths = "";
      state.fee = "";
      state.value1 = null;
      state.value2 = null;
    };

    const Completepayment = (index) => {
      let parame = {};
      if (state.paytypes == 1) {
        let monthes = "";
        if (state.selecteder == state.managelist.length) {
          monthes = state.OtherMonths;
        } else {
          monthes = state.managelist[state.selecteder].month;
        }
        if (state.space_num == 0) {
          message.warning("没有车位，无法购买月租套餐");
          return;
        }
        if (!state.amountMoney || state.amountMoney <= 0) {
          message.warning("请选择月租套餐");
          return;
        }
        if (!state.value1) {
          message.warning("请选择日期");
          return;
        }
        parame = {
          cash_type: 1,
          car_id: state.car_id,
          park_id: state.park_id,
          cash: state.amountMoney,
          start_time: state.value1,
          month: monthes,
        };
      } else {
        if (!state.amountMoney || state.amountMoney <= 0) {
          message.warning("请选择储值金额");
          return;
        }
        parame = {
          cash_type: 2,
          car_id: state.car_id,
          park_id: state.park_id,
          cash: state.amountMoney,
        };
      }
      console.log(index)
      if(index){
        parame.online = index
        state.submitLoading = true;
      }else {
        state.loading = true;
      }
      request.post("/work_park", "/car/charge", parame).then((res) => {
        if(index){
          goOnlinePay(res.info);
        }else {
          message.success("缴费成功");
          state.stored = false;
          orderGoods();
          getVehicle();
          handlepay()
        }
      }).finally(() => {
        state.loading = false;
        state.submitLoading = false;
      });
    };

    const changetimes = (date, string) => {
      console.log(date, string)
      state.value2 = date;
      state.value1 = string;
    };

    const orderGoods = () => {
      state.billLoading = true;
      request
        .get("/work_park", "/car/orderList", {
          car_id: state.car_id,
          park_id: state.park_id,
          page: state.page,
          pageSize: state.pageSize,
        })
        .then((res) => {
          state.billList = res.list;
          state.total = res.total;
        })
        .finally(() => {
          state.billLoading = false;
        });
    };

    const turnoverPagination = computed(() => ({
      total: state.total,
      current: state.page,
      pageSize: state.pageSize,
      showSizeChanger: true,
    }));

    const OperationRecords = () => {
      state.operateLoading = true;
      request
        .get("/work_park", "/car/operateLog", {
          car_id: state.car_id,
          page: state.page1,
          pageSize: state.pageSize1,
        })
        .then((res) => {
          state.operateList = res.list;
          state.total1 = res.total;
        })
        .finally(() => {
          state.operateLoading = false;
        });
    };

    const Pagination = computed(() => ({
      total: state.total1,
      current: state.page1,
      pageSize: state.pageSize1,
      showSizeChanger: true,
    }));

    const operatees = (item) => {
      state.userId = item.user_id;
      state.coordinateData = window.event;
      setTimeout(() => {
        state.userVisible = true;
      }, 50);
    };

    const EditVehicle = () => {
      state.currentAppName = "editPark";
      state.getAppToChildData = utils.getAppToChildData({
        propsInfo: {
          currentParams: {
            type: 1,
            editId: state.car_id,
            editCarVisible: true
          },
        },
      });
      state.showMicroPages = true;

    };

    const xiangqing = (item) => {
      state.currentAppName = "editPark";
      state.getAppToChildData = utils.getAppToChildData({
        propsInfo: {
          currentParams: {
            type: 2,
            detailslist: item.order_id,
            detailes: true
          },
        },
      });
      state.showMicroPages = true;

    };

    const storedValue = () => {
      state.currentAppName = "editPark";
      state.getAppToChildData = utils.getAppToChildData({
        propsInfo: {
          currentParams: {
            type: 3,
            parkid: state.park_id,
            carnumber: state.car_number,
            storeval: true
          },
        },
      });
      state.showMicroPages = true;
    };

     // 监听子应用弹框关闭后的回调
     const handleComponentsChange = (e) => {
      const data = e?.detail?.data;
      if (data.type == "close") {
        nextTick(() => {
          state.currentAppName = "";
          state.showMicroPages = false;
        });
      }
      if (data.type == "success") {
        nextTick(() => {
          state.currentAppName = "";
          state.showMicroPages = false;
          getVehicle();
        });
      }
      state.getAppToChildData = {};
      microApp.unmountApp("addPark", {
        destroy: true,
        clearAliveState: true,
      });
    };

    const locationUrl = location.origin;

    const devHttpMap = {
      editPark: "http://localhost:4007/",
    };

    const defaultPageData = {
      editPark: "/microPage/index",
    };

    const isProduction = !utils.isEnv();

    const goOnlinePay = (data) => {
      state.orderId = data?.order_id;
      state.qrcodeUrl = data?.url;
      state.payVisible = true;
    };

    const paySuccessGoBack = () => {
      state.orderId = "";
      state.qrcodeUrl = "";
      state.payVisible = false;
    };

    const paySuccess = () => {
      paySuccessGoBack()
      state.stored = false;
      orderGoods();
      getVehicle();
      handlepay()
    };

    const init = () => {
      state.car_id = props.items.id;
      getVehicle();
    };

    init();

    onActivated(() => {
      init();
    });

    return {
      ...toRefs(state),
      houseColumns,
      BILL_COLUMNS,
      Operate,
      turnoverPagination,
      Pagination,
      dateFormatStr,
      dayjs,
      canCheck,
      goRoomDetail,
      cancelRoomDetail,
      roomClick,
      switches,
      getVehicle,
      EditVehicle,
      storedValue,
      orderGoods,
      OperationRecords,
      operatees,
      showstored,
      handlepay,
      Completepayment,
      rentaler,
      storedes,
      qhchange,
      qhOtherMon,
      changetimes,
      xiangqing,
      paySuccessGoBack,
      paySuccess,
      goOnlinePay,
      devHttpMap,
      locationUrl,
      defaultPageData,
      isProduction,
      handleComponentsChange
    };
  },
});

const houseColumns = [
  {
    title: "项目",
    dataIndex: "village_name",
    align: "center",
  },
  {
    title: "楼宇",
    dataIndex: "build_name",
    align: "center",
  },
  {
    title: "楼层",
    dataIndex: "layer_name",
    align: "center",
  },
  {
    title: "房间号",
    dataIndex: "room_number",
    key: "room_number",
    align: "center",
  },
  {
    title: "租赁面积",
    dataIndex: "lease_square",
    align: "center",
    customRender: ({ text, record, index }) => {
      return (record?.rent_data?.lease_square || 0) + "㎡";
    },
  },
  {
    title: "物业面积",
    dataIndex: "property_square",
    align: "center",
    customRender: ({ text, record, index }) => {
      return (record?.rent_data?.property_square || 0) + "㎡";
    },
  },
  {
    title: "房源标签",
    dataIndex: "tag_name_arr",
    key: "tag_name",
    align: "center",
  },
];

const BILL_COLUMNS = [
  {
    title: "项目名称",
    dataIndex: "village_name",
    align: "center",
  },
  {
    title: "车场名称",
    dataIndex: "park_name",
    align: "center",
  },
  {
    title: "订单类型",
    dataIndex: "order_type_txt",
    align: "center",
  },
  {
    title: "订单信息",
    dataIndex: "OrderingInformation",
    key: "OrderingInformation",
    align: "center",
    width: 250,
  },
  {
    title: "订单金额",
    dataIndex: "Amount",
    key: "Amount",
    align: "center",
  },
  {
    title: "支付时间",
    dataIndex: "pay_time",
    align: "center",
  },
  {
    title: "支付方式",
    dataIndex: "pay_method_txt",
    align: "center",
  },
  {
    title: "第三方订单号",
    dataIndex: "third_order_no",
    align: "center",
    width: 190,
  },
  {
    title: "操作",
    dataIndex: "actualTotal",
    key: "actualTotal",
    align: "center",
  },
];

const Operate = [
  {
    title: "操作人",
    dataIndex: "Name",
    key: "Name",
    align: "center",
    width:150,
  },
  {
    title: "操作时间",
    dataIndex: "created_at",
    align: "center",
    width:200,
  },
  {
    title: "操作类型",
    dataIndex: "type_name",
    align: "center",
    width:150,
  },
  {
    title: "操作内容",
    dataIndex: "str",
    key: "str",
    align: "center",
  },
  {
    title: "订单信息",
    dataIndex: "order_id",
    align: "center",
    width:250,
  },
];
</script>

<style lang="less" scoped>
.owner-cashier {
  background-color: #fff;
}
.owner-descriptions {
  margin-top: 10px;
}
:deep(.ant-descriptions-item-label) {
  text-align: center;
}
:deep(.ant-descriptions-item-content) {
  text-align: center;
}
.owner-bind {
  font-size: 16px;
  font-weight: 600;
}
.font-16 {
  font-size: 16px;
}
.bind-table {
  margin-top: 10px;
}
.bill-table {
  &:deep(.ant-table) {
    color: rgba(0, 0, 0, 85);
    .ant-table-tbody tr:nth-child(2n) td {
      background-color: initial !important;
    }
  }
  &:deep(.ant-table-row-level-1) {
    background-color: #e0e0e0 !important;
  }
  &:deep(.ant-table-row-level-2) {
    font-size: 13px;
    background-color: #fafafa !important;
  }
}
.bind-room-box {
  max-width: 500px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  word-break: break-all;
}
.disabled-link {
  &:hover {
    cursor: not-allowed;
  }
}
.handclick {
  cursor: pointer;
}
.borderes {
  border: 1px solid #007aff;
}
.chuzhi {
  display: inline-block;
  width: 100px;
  height: 60px;
  line-height: 60px;
  background-color: #e5f1ff;
  color: #007aff;
  margin-right: 10px;
  margin-bottom: 10px;
  text-align: center;
  font-size: 16px;
  font-weight: 500;
  border-radius: 5px;
  padding-left: 10px;
  padding-right: 10px;
  cursor: pointer;
}
.chuzhi1 {
  display: inline-block;
  width: 110px;
  height: 60px;
  line-height: 60px;
  background-color: #e5f1ff;
  color: #007aff;
  margin-right: 10px;
  margin-bottom: 10px;
  text-align: center;
  font-size: 16px;
  font-weight: 500;
  border-radius: 5px;
  padding-left: 10px;
  padding-right: 10px;
  cursor: pointer;
  :deep(.ant-input-number-input) {
    background-color: #e5f1ff;
    border: 1px solid #e5f1ff;
    text-align: center;
    color: #007aff;
    font-weight: 500;
  }
  :deep(.ant-input-number) {
    border: 1px solid #e5f1ff;
  }
  :deep(.ant-input-number-handler-wrap) {
    display: none;
  }
}
.MonthlyRent {
  display: inline-block;
  width: 100px;
  //height: 75px;
  background-color: #e5f1ff;
  color: #007aff;
  text-align: center;
  border-radius: 5px;
  margin-right: 10px;
  margin-bottom: 10px;
  padding: 10px;
  cursor: pointer;
  .monthes {
    font-size: 15px;
    height: 32px;
    line-height: 32px;
  }
  .moneyes {
    font-size: 16px;
    font-weight: 500;
    height: 32px;
    line-height: 32px;
  }
}
.MonthlyRent1 {
  display: inline-block;
  width: 110px;
  //height: 75px;
  background-color: #e5f1ff;
  color: #007aff;
  text-align: center;
  border-radius: 5px;
  margin-right: 10px;
  margin-bottom: 10px;
  padding: 10px;
  cursor: pointer;
  :deep(.ant-input-number-input) {
    background-color: #e5f1ff;
    border: 1px solid #e5f1ff;
    text-align: center;
    color: #007aff;
    font-size: 15px;
    //font-weight: 500;
  }
  :deep(.ant-input-number) {
    border: 1px solid #e5f1ff;
  }
  :deep(.ant-input-number-handler-wrap) {
    display: none;
  }
}
</style>
